import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    // 组件间共享的数据或者需要集中管理的数据放在state里面
    state: {
        // 商品列表数据
        shoplist: [
            { "id": 1, 'title': '电水壶', 'price': 50.01, 'src': "/images/1.jpg" },
            { "id": 2, 'title': '电压力锅', 'price': 260.99, 'src': "/images/2.jpg" },
            { "id": 3, 'title': '电饭锅', 'price': 200.99, 'src': "/images/3.jpg" },
            { "id": 4, 'title': '电磁炉', 'price': 300.99, 'src': "/images/4.jpg" },
            { "id": 5, 'title': '微波炉', 'price': 400.99, 'src': "/images/5.jpg" },
            { "id": 6, 'title': '电饼铛', 'price': 200.99, 'src': "/images/6.jpg" },
            { "id": 7, 'title': '豆浆机', 'price': 199.99, 'src': "/images/7.jpg" },
            { "id": 8, 'title': '多用途锅', 'price': 510.99, 'src': "/images/8.jpg" }
        ],
        // 购物车数据
        shopcart: []
    },
    // getters相当于计算属性，可以对state里面的数据进行计算或过滤,getters接收state作为第一参数
    getters: {
        totalPrice(state) {
            var total = 0
            state.shopcart.forEach(item => {
                total += item.price * item.num
            })
            return total;
        }
    },
    mutations: {
        // mutation类似方法，对于state里面的数据的处理(变更)都放在mutations里面
        // mutation接收state作为第一个参数
        add(state, item) {
            // 判断购物车里面是否有当前添加的商品
            var first = state.shopcart.find(i => i.id == item.id);

            // 如果有，直接商品数据加1
            if (first) {
                first.num++;
                // 如果没有，商品添加num属性后push到shopcart
            } else {
                state.shopcart.push({
                    id: item.id,
                    title: item.title,
                    price: item.price,
                    src: item.src,
                    num: 1
                })
            }
        },
        // 删除购物车数据
        del(state, item) {
            state.shopcart.forEach((i, index, arr) => {
                if (i.id == item.id) {
                    arr.splice(index, 1)
                }
            })
        }
    },
	// action类似于mutation，不同的是，action是提交一个mutation，而不是变更数据；action里面可以进行异步操作
	// mutations里面只能进行同步操作；actions接收context作为第一个参数，context是跟store有相同属性和方法的一个对象，可以理解成store的副本
    actions: {
		add(context,item){
			context.commit('add',item)
		}
	},
    modules: {}
})